<template>
    <div class="exercise">
      <codemirror 
        v-model="codeSnippets"
        :options="cmOptions"
      />
    </div>
  </template>
  
  <script>
  // 编辑器代码格式
  import 'codemirror/mode/properties/properties.js'
  // 自动刷新(防止codemirror需要手动刷新才出数据)
  import 'codemirror/addon/display/autorefresh'
  // 主题
  import 'codemirror/theme/ayu-mirage.css'
  
  export default {
    data(){
      return{
        codeSnippets: 'aa',
        cmOptions: {
          autorefresh: true,
          tabSize: 4,
          mode: 'text/x-properties',
          theme: 'ayu-mirage',
          line: true,
          viewportMargin: Infinity, //处理高度自适应时搭配使用
          highlightDifferences: true,
          autofocus: false,
          indentUnit: 2,
          smartIndent: true,
          readOnly: true, // 只读
          showCursorWhenSelecting: true,
          firstLineNumber: 1
        }
      }
    }
  }
  
  </script>
  
  <style lang="scss">
  .CodeMirror{
    font-family: monospace;
    height: 100vh;
    color: black;
    direction: ltr;
  }
  </style>
  